<template>
	<view>
		<view style="" class="app-top-h"></view>
		<metabs v-model="tabIndex" :tabs="tabs" :height='60'   bgColor='#fff' :fixed='true' :borderNone="false"></metabs>
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :height="height" @closeSearch='closeSearch'></mescroll-item>
			</swiper-item>
		</swiper>
		<!-- <image src="../../static/list/shaixuanh5.png" class="screen-order" @click="openFier()"></image> -->
		<uni-popup ref='distribution_pop'  >
			<view class="text-center static-pop bg-white">
				<view class="static-title">订单筛选</view>
				<view class="grids">
					<uni-section title="日期筛选" type="line"></uni-section>
					<view class="example-body">
						<uni-datetime-picker v-model="searchDetail.data" type="daterange" :tabbarBottom='true' @maskClick="maskClick" />
					</view>
					<uni-section title="关键词" type="line"></uni-section>
					<view class="example-body">
						<input class="screen-input" placeholder="请输入关键词"  v-model="searchDetail.keyworld" />
					</view>					
				</view>
				<view class="screen-button example-body">
					<view class="login-btna" @click="search">查询</view>
					<view class="reset-button" @click="reset">重置</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import metabs from '@/components/me-tabs/me-tabs.vue'
	import MescrollItem from "./components/mescroll-swiper-item.vue";
	export default{
		data(){
			return{
				height: "", // 需要固定swiper的高度
				tabs: [{name:'全部'}, {name:'处理中'}, {name:'待结算'}, {name:'成功'}, {name:'失败'}],
				tabIndex: 0 ,// 当前tab的下标
				searchDetail:{
					data:["",""],
					keyworld:""
				},
				
			}
		},
		components:{
			metabs,
			MescrollItem
		},
		onLoad() {
			// 需要固定swiper的高度 (需减去悬浮tabs的高度64rpx)
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(64) + 'px'

			
		},
		onShow() {
			// 返回刷新: https://www.mescroll.com/uni.html#note 第二点
			
			let token = uni.getStorageSync("AccessToken")
			if(token){
				let curMescroll = this.getMescroll(this.tabIndex)
				curMescroll && curMescroll.resetUpScroll()
			}
			
			
			// this.canReset = true
		},
		methods: {
			// 轮播菜单
			swiperChange(e){
				this.tabIndex = e.detail.current
			},
			openFier(){
				this.$refs.distribution_pop.open('bottom') 
			},
			search(){
				if(this.searchDetail.data[0]){
					this.searchDetail.data[0] = this.searchDetail.data[0] + ' 00:00:00'
					this.searchDetail.data[1] = this.searchDetail.data[1] + ' 23:59:59'
				}
				
				this.$refs.mescrollItem[this.tabIndex].doSearch(this.searchDetail)
			},
			closeSearch(){
				this.$refs.distribution_pop.close()
			},
			reset(){
				this.searchDetail = {
					data:["",""],
					keyworld:""
				}
				this.$refs.mescrollItem[this.tabIndex].doSearch(this.searchDetail)
			},
			maskClick(){
				
			},
			// 获取指定下标的mescroll对象
			getMescroll(i){
				let mescrollItems = this.$refs.mescrollItem;
				if(mescrollItems){
					let item = mescrollItems[i]
					if(item) return item.mescroll
				}
				return null
			}
		}
	}
</script>

<style lang="scss">

</style>
